<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>合集功能测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .test-section {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
        }
        
        .test-section h3 {
            margin-top: 0;
            color: #333;
        }
        
        .test-result {
            background: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            white-space: pre-wrap;
        }
        
        .success {
            background: #e8f5e8;
            color: #52c41a;
        }
        
        .error {
            background: #ffe6e6;
            color: #f56c6c;
        }
        
        button {
            background: #409eff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        
        button:hover {
            background: #3a8ee6;
        }
    </style>
</head>
<body>
    <h1>合集功能测试页面</h1>
    <p>这个页面用于测试新添加的合集功能是否正常工作。</p>
    
    <div class="test-section">
        <h3>1. 合集API测试</h3>
        <button onclick="testCollectionAPI()">测试合集API</button>
        <div id="api-result" class="test-result"></div>
    </div>
    
    <div class="test-section">
        <h3>2. 合集数据获取测试</h3>
        <button onclick="testCollectionData()">获取合集数据</button>
        <div id="data-result" class="test-result"></div>
    </div>
    
    <div class="test-section">
        <h3>3. 合集选项测试</h3>
        <button onclick="testCollectionOptions()">获取合集选项</button>
        <div id="options-result" class="test-result"></div>
    </div>
    
    <div class="test-section">
        <h3>4. 功能验证指南</h3>
        <div class="test-result">
            <strong>手动测试步骤：</strong>
            
            1. 打开主应用页面：http://localhost:8080
            
            2. 检查文章列表界面：
               - 搜索框应该单独占据一行
               - 下方应该有状态筛选和合集筛选两个下拉框
               - 新建文章按钮在筛选器下方
               
            3. 测试合集筛选：
               - 点击合集筛选下拉框
               - 应该看到"全部合集"、"未分类"以及各个合集选项
               - 每个选项应该显示文章数量
               
            4. 测试文章编辑：
               - 创建或编辑一篇文章
               - 工具栏中"保存"按钮左侧应该有合集选择器
               - 可以为文章选择不同的合集
               
            5. 测试文章显示：
               - 文章列表项中应该显示合集标签
               - 标签颜色应该与合集对应
               - 未分类文章显示灰色"未分类"标签
        </div>
    </div>

    <script>
        // 创建一个简单的合集API模拟
        const COLLECTION_DICTIONARY = [
            {
                id: 'tech',
                name: '技术文章',
                description: '技术相关的文章内容',
                color: '#409EFF'
            },
            {
                id: 'life', 
                name: '生活感悟',
                description: '生活相关的心得体会',
                color: '#67C23A'
            },
            {
                id: 'travel',
                name: '旅行游记', 
                description: '旅行见闻和游记',
                color: '#E6A23C'
            },
            {
                id: 'study',
                name: '学习笔记',
                description: '学习过程中的笔记和总结',
                color: '#F56C6C'
            },
            {
                id: 'work',
                name: '工作随笔',
                description: '工作中的思考和记录',
                color: '#909399'
            },
            {
                id: 'other',
                name: '其他',
                description: '其他类型的文章',
                color: '#C0C4CC'
            }
        ];
        
        function testCollectionAPI() {
            const resultDiv = document.getElementById('api-result');
            resultDiv.className = 'test-result';
            resultDiv.textContent = '正在测试合集API...';
            
            try {
                // 模拟API调用
                setTimeout(() => {
                    const result = {
                        status: 'success',
                        message: '合集API测试成功',
                        data: {
                            totalCollections: COLLECTION_DICTIONARY.length,
                            collections: COLLECTION_DICTIONARY.map(c => c.name)
                        }
                    };
                    
                    resultDiv.className = 'test-result success';
                    resultDiv.textContent = JSON.stringify(result, null, 2);
                }, 500);
            } catch (error) {
                resultDiv.className = 'test-result error';
                resultDiv.textContent = '测试失败: ' + error.message;
            }
        }
        
        function testCollectionData() {
            const resultDiv = document.getElementById('data-result');
            resultDiv.className = 'test-result';
            resultDiv.textContent = '正在获取合集数据...';
            
            try {
                setTimeout(() => {
                    resultDiv.className = 'test-result success';
                    resultDiv.textContent = JSON.stringify(COLLECTION_DICTIONARY, null, 2);
                }, 300);
            } catch (error) {
                resultDiv.className = 'test-result error';
                resultDiv.textContent = '获取失败: ' + error.message;
            }
        }
        
        function testCollectionOptions() {
            const resultDiv = document.getElementById('options-result');
            resultDiv.className = 'test-result';
            resultDiv.textContent = '正在生成合集选项...';
            
            try {
                setTimeout(() => {
                    const options = [
                        { label: '未分类', value: '', color: '#C0C4CC' },
                        ...COLLECTION_DICTIONARY.map(collection => ({
                            label: collection.name,
                            value: collection.id,
                            color: collection.color,
                            description: collection.description
                        }))
                    ];
                    
                    resultDiv.className = 'test-result success';
                    resultDiv.textContent = JSON.stringify(options, null, 2);
                }, 200);
            } catch (error) {
                resultDiv.className = 'test-result error';
                resultDiv.textContent = '生成失败: ' + error.message;
            }
        }
        
        // 页面加载完成后自动运行基础测试
        window.onload = function() {
            console.log('合集功能测试页面已加载');
            console.log('合集字典数据:', COLLECTION_DICTIONARY);
        };
    </script>
</body>
</html>